<template>
  <div class="container">
    <el-form ref="ruleForm" :model="query" :rules="rules" label-width="140px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="统一社会信用代码" prop="identify">
            <el-input
              v-model="query.identify"
              placeholder="请输入统一社会信用代码"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位名称" prop="unitName">
            <el-input
              maxlength="50"
              v-model="query.unitName"
              placeholder="请输入单位名称"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="所属区域" prop="districtCode">
            <el-select
              v-model="query.districtCode"
              placeholder="请选择所属区域"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in areaList"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位地址" prop="unitAddress">
            <el-input
              maxlength="50"
              v-model="query.unitAddress"
              placeholder="请输入单位地址"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="配送品种" prop="distributionVarieties">
            <el-input
              maxlength="50"
              v-model="query.distributionVarieties"
              placeholder="请输入配送品种"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="配送范围" prop="distributionScope">
            <el-select
              v-model="query.distributionScope"
              multiple collapse-tags
              placeholder="请选择所属区域"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in areaList"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系人" prop="contacts">
            <el-input
              maxlength="10"
              v-model="query.contacts"
              placeholder="请输入联系人"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="联系方式" prop="contactInformation">
            <el-input
              maxlength="11"
              v-model="query.contactInformation"
              placeholder="请输入联系方式"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="进货信息" prop="realNameBill">
            <el-radio-group v-model="query.realNameBill">
              <el-radio label="1">已对接上传进货信息</el-radio>
              <el-radio label="0">未对接上传进货信息</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="合格证明文件" prop="certificationReport">
            <el-radio-group v-model="query.certificationReport">
              <el-radio label="1">已对接合格证明文件</el-radio>
              <el-radio label="0">未对接合格证明文件</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="快检记录">
            <el-radio-group v-model="query.quickInspection">
              <el-radio label="1">已对接上传快检记录</el-radio>
              <el-radio label="0">未对接上传快检记录</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否显示了解更多">
            <el-radio-group v-model="query.showLearnMore">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="单位简介" prop="companyProfile">
            <quill-editor
              :content="query.companyProfile"
              :options="editorOption"
              @change="onEditorChange($event)"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-form-item label="原文链接" prop="noticeCategory">
        <el-input
          maxlength="50"
          v-model="query.noticeCategory"
          placeholder="请输入原文链接"
        ></el-input>
      </el-form-item>

      <el-form-item label="概要" prop="noticeSummary">
        <el-input
          maxlength="50"
          v-model="query.noticeSummary"
          placeholder="请输入概要"
        ></el-input>
      </el-form-item>
      <el-form-item label="公告内容" prop="noticeContent">
        <quill-editor
          :content="query.noticeContent"
          :options="editorOption"
          @change="onEditorChange($event)"
        />
      </el-form-item>
      <el-form-item label="相关附件">
        <el-upload
          :file-list="query.list"
          drag
          :action="$upload"
          :headers="$headers()"
          :on-preview="
            (e) => {
              $downloadFiles(e.fileUrl);
            }
          "
          :on-error="onError"
          :on-remove="onRemove"
          :before-remove="beforeRemove"
          multiple
          :on-success="success"
          :before-upload="
            (e) => {
              return $beforeAvatarUpload(e, 1);
            }
          "
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传world、excel、pdf文件，且不超过5M
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="">
        <div class="form_button">
          <el-button type="primary" @click="submit(0)">仅保存</el-button>
          <el-button type="primary" @click="submit(1)">保存并下发</el-button>
        </div>
      </el-form-item> -->
      <el-form-item label="">
        <div class="form_button">
          <el-button type="primary" @click="submit()">保存</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { quillRedefine } from "vue-quill-editor-upload";
import { saveSupplierPromotionForm,supplierPromotionFormList ,landSupplierPromotionForm } from "@/api/modules/enterprise";
export default {
  created() {
    let that = this;
    this.editorOption = quillRedefine({
      // 图片上传的设置
      uploadConfig: {
        action: that.$upload, // 必填参数 图片上传地址
        // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
        // 你必须把返回的数据中所包含的图片地址 return 回去
        res: (respnse) => {
          if (respnse.code == 200) {
            return that.$uploadURL + respnse.data;
          } else {
            that.$error("上传失败");
          }
        },
        methods: "POST", // 可选参数 图片上传方式  默认为post
        token: "", // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
        name: "file", // 可选参数 文件的参数名 默认为img
        size: 5 * 1024, // 可选参数   图片限制大小，单位为Kb, 1M = 1024Kb
        accept: "image/png,image/jpeg, ", // 可选参数 可上传的图片格式
        // start: function (){}
        start: (e) => {}, // 可选参数 接收一个函数 开始上传数据时会触发
        end: (e) => {}, // 可选参数 接收一个函数 上传数据完成（成功或者失败）时会触发
        success: (e) => {}, // 可选参数 接收一个函数 上传数据成功时会触发
        error: () => {}, // 可选参数 接收一个函数 上传数据中断时会触发
      },
      // 以下所有设置都和vue-quill-editor本身所对应
      placeholder: "请输入编辑文章内容", // 可选参数 富文本框内的提示语
      theme: "", // 可选参数 富文本编辑器的风格
      toolOptions: [
        ["bold", "italic", "underline", "strike"],
        ["blockquote", "code-block"],
        [{ header: 1 }, { header: 2 }],
        [{ list: "ordered" }, { list: "bullet" }],
        [{ script: "sub" }, { script: "super" }],
        [{ indent: "-1" }, { indent: "+1" }],
        [{ direction: "rtl" }],
        [{ size: ["small", false, "large", "huge"] }],
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        [{ color: [] }, { background: [] }],
        [{ font: [] }],
        [{ align: [] }],
        ["clean"],
        ["link", "image"],
      ], // 可选参数  选择工具栏的需要哪些功能  默认是全部
      handlers: {},
    });
    if(this.$route.query.id){
        this.findById()
    }
  },
  data() {
    return {
      content: "",
      editorOption: {},
      areaList: [
        {
          value: "吴中区",
          label: "吴中区",
        },

        {
          value: "相城区",
          label: "相城区",
        },
        {
          value: "高新区",
          label: "高新区",
        },
        {
          value: "姑苏区",
          label: "姑苏区",
        },
        {
          value: "工业园区",
          label: "工业园区",
        },
        {
          value: "常熟市",
          label: "常熟市",
        },
        {
          value: "张家港市",
          label: "张家港市",
        },
        {
          value: "昆山市",
          label: "昆山市",
        },
        {
          value: "吴江区",
          label: "吴江区",
        },
        {
          value: "太仓市",
          label: "太仓市",
        },
        {
          value: "张家港保税区",
          label: "张家港保税区",
        },
      ],
      query: {
        certificationReport: "1",
        companyProfile: "",
        distributionVarieties: "",
        districtCode: "",
        quickInspection: "1",
        unitAddress: "",
        unitName: "",
        realNameBill: "1",
        identify: "",
        showLearnMore:1,
        contacts:"",
        contactInformation:"",
        id:""
      },
      rules: {
        contacts: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        contactInformation: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
        ],
        identify: [
          {
            required: true,
            message: "请输入统一社会信用代码",
            trigger: "blur",
          },
        ],
        unitName: [
          { required: true, message: "请输入单位名称", trigger: "blur" },
        ],
        districtCode: [
          {
            type: "string",
            required: true,
            message: "请选择所属区域",
            trigger: "change",
          },
        ],
        unitAddress: [
          {
            required: true,
            message: "请输入单位地址",
            trigger: "blur",
          },
        ],
        distributionVarieties: [
          {
            required: true,
            message: "请输入配送品种",
            trigger: "blur",
          },
        ],
        distributionScope: [
          {
            required: true,
            message: "请选择配送范围",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    onEditorChange(e) {
      this.query.companyProfile = e.html;
    },
    submit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
              landSupplierPromotionForm({
          params: this.$formValidate,
        }).then((res) => {
          if (this.query.id) {
            saveSupplierPromotionForm({
              ...this.query,
              distributionScope: this.query.distributionScope.join(","),
            }).then((res) => {
              this.$success("保存成功");
              this.$router.go(-1);
            });
          } else {
            saveSupplierPromotionForm({
              ...this.query,
              distributionScope: this.query.distributionScope.join(","),
            }).then((res) => {
              this.$success("保存成功");
              this.$router.go(-1);
            });
          }
              });
        } else {
          this.$error("请输入必填项");
        }
      });
    },
    findById() {
      supplierPromotionFormList({
        params:{
            id: this.$route.query.id,
        }
      }).then((res) => {
        res.data.distributionScope=res.data.distributionScope.split(",")
        this.query=res.data
      });
    },
  },
  // 监听属性
  watch: {},
  //实例销毁之前
  beforeDestroy() {
    sessionStorage.removeItem("notice");
  },
};
// query.area
</script>
<style lang="less" scoped>
.container {
  padding: 20px;
  .checkbox {
    display: flex;
    .checkbox_last {
      margin-right: 15px;
    }
  }
  .form_button {
    text-align: right;
  }
  /deep/ .ql-container {
    font-size: 16px;
  }
}
</style>
